import React, { Component } from 'react'
import classnames from 'classnames'
import { useNavigate } from "react-router-dom"
const myWithRouter = (Detail) => (props) => <Detail {...props} history={useNavigate()} />

class SignuopForm extends Component {

  constructor() {
    super();
    this.state = {
      username: 'admin',
      email: '43@qq.com',
      password: '123',
      passwordConfirmation: '123',
      errors: {},
      isLoading: false,
      invalid: false
    };
  }
  async onSubmit(e) {
    this.setState({ errors: {}, isLoading: true });
    e.preventDefault();
    try {
      const { errors } = await this.props.userSignupRequest(this.state);
      this.setState({ errors, isLoading: false });
      this.props.flashMessages({
        type: "success",
        text: "注册成功，欢迎你的加入!"
      });
      this.props.history('/');
    } catch ({ errors }) {
      this.setState({ errors, isLoading: false });
    }

  }


  onChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    });
  }
  async checkUserExists(e) {
    const { name, value } = e.target;
    let { errors, invalid } = this.state;
    if (value.length) {
      const result = await this.props.isUserExists({ username: value });
      if (result.length) {
        errors[name] = "用户名已存在：" + result[0].username;
        invalid = true;
      } else {
        errors = {};
        invalid = false;
      }
      this.setState({ errors, invalid });
    }
  }

  render() {
    const { errors, isLoading, invalid, username, password, passwordConfirmation, email } = this.state;
    return (
      <form onSubmit={this.onSubmit.bind(this)}>
        <h1> Join our community</h1>
        <div className="form-group">
          <label htmlFor="">username</label>
          <input className={classnames('form-control', { 'is-invalid': errors.username })} type="text" name="username" value={username} onChange={this.onChange.bind(this)} onBlur={this.checkUserExists.bind(this)} />
          {errors.username && <span className='form-text text-danger'>{errors.username}</span>}
        </div>

        <div className="form-group">
          <label htmlFor="">password</label>
          <input className={classnames('form-control', { 'is-invalid': errors.password })} type="text" name="password" value={password} onChange={this.onChange.bind(this)} />
          {errors.password && <span className='form-text text-danger'>{errors.password}</span>}
        </div>

        <div className="form-group">
          <label htmlFor="">passwordConfirmation</label>
          <input className={classnames('form-control', { 'is-invalid': (errors.password || errors.passwordConfirmation) })} type="text" name="passwordConfirmation" value={passwordConfirmation} onChange={this.onChange.bind(this)} />
          {(errors.password || errors.passwordConfirmation) && <span className='form-text text-danger'>{(errors.password || errors.passwordConfirmation)}</span>}

        </div>

        <div className="form-group">
          <label htmlFor="">email</label>
          <input className={classnames('form-control', { 'is-invalid': errors.email })} type="text" name="email" value={email} onChange={this.onChange.bind(this)} />
          {errors.email && <span className='form-text text-danger'>{errors.email}</span>}
        </div>

        <div className="form-group">
          <button disabled={isLoading || invalid} className="btn btn-primary btn-lg">注册</button>
        </div>
      </form>
    )
  }
}
export default myWithRouter(SignuopForm);
